import { ComponentType } from 'react'
import Taro, { PureComponent, Config, useState } from '@tarojs/taro'
import { View, Image, Swiper, SwiperItem } from '@tarojs/components'
import { AtGrid, AtTabBar } from 'taro-ui'
import {inject, observer} from "@tarojs/mobx";
import Car from '../../assets/icons/cheliangguanli.svg'
import Tool from '../../assets/icons/gongjuguanli.svg'
import Facilities from '../../assets/icons/sheshiguanli.svg'
import Safety from '../../assets/icons/anquanguanli.svg'
import Tool2 from '../../assets/icons/gongju.svg'
import Scan from '../../assets/icons/saoma.svg'
import IndexPage from '../../assets/icons/yemian-copy-copy.svg'
import Me from '../../assets/icons/Icon_wodeB.svg'

import './index.scss'

type PageStateProps = {
  indexStore: {
    scanUrl: string,
    scanCode: Function
  }
}

interface Index {
  props: PageStateProps;
}

@inject('indexStore')
@observer
class Index extends PureComponent {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '脚手架验收程序'
  }

  render () {
    const [current, setCurrent] = useState(0)
    const { indexStore } = this.props
    return (
      <View className='wrapper'>
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#fff'
          circular
          indicatorDots
          autoplay
        >
          <SwiperItem>
            <View className='demo-text-1'>
              <Image className='swiper-item-img' src="https://free.modao.cc/uploads4/images/3985/39854542/v2_pyixc7.jpg" />
            </View>
          </SwiperItem>
          <SwiperItem>
            <View className='demo-text-2'>
              <Image className='swiper-item-img' src="https://free.modao.cc/uploads4/images/3985/39854542/v2_pyixc7.jpg" />
            </View>
          </SwiperItem>
          <SwiperItem>
            <View className='demo-text-3'>
              <Image className='swiper-item-img' src="https://free.modao.cc/uploads4/images/3985/39854542/v2_pyixc7.jpg" />
            </View>
          </SwiperItem>
        </Swiper>
        <AtGrid
          columnNum={3}
          data={[
            { image: Facilities, value: '设施管理' },
            { image: Tool, value: '工具管理' },
            { image: Safety, value: '安全管理' },
            { image: Car, value: '车辆管理' },
            { image: Tool2, value: '脚手架管理' },
            { image: Scan, value: '扫描' },
          ]}
          onClick={(_, index) => {
            switch (index) {
              case 1:
                Taro.navigateTo({ url: '/pages/tool-list/index' })
                break;
              case 4:
                Taro.navigateTo({ url: '/pages/list/index' })
                break;
              case 5:
                indexStore.scanCode()
                break;
              default:
                Taro.showToast({title: '功能还在开发中', icon: 'none'})
                break;
            }
          }}
        />
        <AtTabBar
          fixed
          tabList={[
            { title: '首页', image: IndexPage },
            { title: '扫码', image: Scan },
            { title: '我的', image: Me }
          ]}
          onClick={(value) => {
            if (value === 1) {
              indexStore.scanCode()
              return
            }
            setCurrent(value)
          }}
          current={current}
        />
      </View>
    )
  }
}

export default Index  as ComponentType
